<template>
	<view>
		<view class="subsection-box">
			<view :class="selectSubsection == item ? 'item active' : 'item'" @click="goPage('/pages/my/releaseAds/sel')"
				v-for="(item,index) in list" :key="index">
				{{getStr(item)}}
			</view>
		</view>

		<view class="form-box">
			<u-form labelPosition="top" labelStyle="color:#ffffff" :labelWidth="200" :model="formData">
				<u-form-item :label="getStr('my.releaseAds.buy.selectCards')" prop="cards">
					<u-input v-model="formData.cardType.cardType" disabledColor="#262930" readonly
						:placeholder="getStr('my.releaseAds.buy.selectCards.placeholder')" color="#ffffff"
						placeholderStyle="color:#666666" border="none">
						<template #suffix>
							<view>
								<image @click="appCardTypeShow = true" src="/static/images1/index/select-icon.png"
									style="width: 24rpx; height: 24rpx;"></image>
							</view>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item :label="getStr('my.releaseAds.buy.eachIncrease')" prop="cardGrowthRate">
					<u-input v-model="formData.cardGrowthRate" disabledColor="#262930" readonly
						:placeholder="getStr('my.releaseAds.buy.eachIncrease.placeholder')" color="#ffffff"
						placeholderStyle="color:#666666" border="none">
					</u-input>
				</u-form-item>
				<u-form-item :label="getStr('my.releaseAds.buy.priceRange')" prop="currentPriceLimit">
					<u-input v-model="formData.currentPriceLimit" disabledColor="#262930" 
						:placeholder="getStr('my.releaseAds.buy.priceRange.placeholder')" color="#ffffff"
						placeholderStyle="color:#666666" border="none"></u-input>
				</u-form-item>
			</u-form>
		</view>

		<view class="action-sheet-box">
			<up-action-sheet :actions="appCardTypeList" :title="getStr('sheet.title.selectCard')"
			:show="appCardTypeShow" @select="handleSelectCard" @close="appCardTypeShow = false"></up-action-sheet>
		</view>
		

		<view class="btn-box">
			<sysButton :text="getStr('publish')" :handleChange="pushAdBuyFn"></sysButton>
		</view>

	</view>
</template>

<script setup>
	import sysButton from '@/components/sysButton/index.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getAppCardTypeList,
		pushAdBuy
	} from '@/common/api/common.js'
	const list = ref(['buy', 'sell'])
	const selectSubsection = ref('buy')
	const isRender = ref(true)
	const appCardTypeShow = ref(false)

	const appCardTypeList = ref([])

	const formData = reactive({
		cardType: {cardType:''},
		cardGrowthRate: '',
		currentPriceLimit: ''
	})

	const getAppCardTypeListFn = async () => {
		const res = await getAppCardTypeList()
		if (res.code == 200) {
			appCardTypeList.value = res.data.map(item => {
				return {
					...item,
					name:item.cardType
				}
			})
		}
	}
	
	const handleSelectCard = (e) => {
		console.log(e)
		formData.cardType = e
		formData.cardGrowthRate = e.cardGrowthRate * 100 + '%'
	}
	
	const pushAdBuyFn = async () => {
		const res = await pushAdBuy({
			telegramId: uni.getStorageSync('telegramId'),
			cardTypeId: formData.cardType.id,
			currentPriceLimit: formData.currentPriceLimit
		})
		if(res.code == 200){
			uni.$u.toast(getStr('toast.successfully' +123))
			uni.switchTab({
				url: '/pages/my/index'
			})
		}else{
			uni.$u.toast(res.message)
		}
	}

	const goPage = (url) => {
		uni.navigateTo({
			url: url
		})
	}

	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(() => {
			isRender.value = true
		}, 50)
	}
	onLoad(()=>{
		getAppCardTypeListFn()
	})
	onShow(() => {
		uni.$tg.showButton()
		setIsRender()
	})
</script>
<style>
	page {
		background: #1C1E23;
	}
</style>
<style lang="scss" scoped>
	.subsection-box {
		width: calc(100vw - 144rpx - 144rpx);
		height: 84rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #272A2F;
		border-radius: 12rpx;
		padding: 8rpx;
		box-sizing: border-box;
		margin: 28rpx auto 0;

		.item {
			width: 50%;
			height: calc(84rpx - 8rpx - 8rpx);
			color: #ffffff;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.active {
			background: #1C1F24;
		}
	}

	.form-box {
		width: calc(100vw - 28rpx - 28rpx);
		padding-top: 56rpx;
		margin: 0 auto;

		::v-deep .u-form-item {
			margin-bottom: 20rpx;

			text {}
		}

		::v-deep .u-form-item__body__left {
			margin-bottom: 24rpx;
		}

		::v-deep .u-form-item {
			margin-bottom: 0;
		}

		::v-deep .u-form-item__body {
			padding: 0 0 50rpx;
		}

		::v-deep .u-input {
			background-color: #262930;
			height: 88rpx;
			padding: 0 18rpx 0 28rpx !important;
			box-sizing: border-box;
			font-size: 28rpx;
		}
	}

	.btn-box {
		width: calc(100% - 28rpx - 28rpx);
		margin: 0 auto;
	}
	
	.action-sheet-box{
		::v-deep .u-popup__content{
			background-color: #1C1E23;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
		}
		::v-deep .u-action-sheet--hover{
			background-color: #1C1E23;
		}
		::v-deep .u-action-sheet__header__title{
			color: #fff;
		}
		::v-deep .u-action-sheet__item-wrap__item__name{
			color: #fff;
		}
	}
</style>